<template>
  <el-container id="app-container"
                v-loading="loading"
                element-loading-text="系统加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">

    <div id="app-overlay" v-if="loginState.isShowLoginDialog"></div>

    <el-header id="app-header" height="60px">

      <div class="app-header__logo">
        <img :src="logo" alt="">
      </div>


      <div class="app-header__buttons">
        <template v-if="needLogin ">
          <el-button @click="handleLogout" icon="el-icon-" class="blue">退出</el-button>
        </template>
      </div>

      <div v-if="needLogin" class="app-header__userinfo">
        {{ loginState.loginInfo.displayName }}
      </div>

    </el-header>

    <el-container v-if="!loginState.isShowLoginDialog">
      <el-aside id="app-aside" width="200px">
        <el-menu v-show="menus.length>0" id="app-menu" :default-active="tabState.tabActive">
          <el-submenu v-for="group in menus" :index="group.name">
            <template #title>
              <i :class="group.icon"></i>
              <span>{{ group.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item @click="clickMenu(menu)" v-for="menu in group.menus" :index="menu.name">
                {{ menu.title }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <div id="app-infos">
          <p>{{ systemInfo.copyright }}</p>
          <p>{{ systemInfo.version }}</p>
        </div>

      </el-aside>
      <el-main id="app-main">
        <el-tabs id="app-tabs" type="card" :active-name="tabState.tabActive" closable @tab-remove="removeTab"
                 @tab-click="clickTab">
          <el-tab-pane v-for="tab in tabState.tabOpened" :label="tab.title" :name="tab.name">
            <template v-if="tabs[tab.name]">
              <component :is="tabs[tab.name] "/>
            </template>
            <template v-else>
              Module component not found.
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <!--  登录框  -->
    <el-dialog title="用户登录" v-model="loginState.isShowLoginDialog" width="500px" append-to-body>

      <el-form style="width: 400px" label-position="right" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="loginState.loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginState.loginForm.password"></el-input>
        </el-form-item>
      </el-form>

      <span class="font-red" style="margin-left: 120px">{{ loginError }}</span>

      <div class="margin text-center">
        <el-button class="blue" @click="handleLogin" :loading="loginState.isLoginProcessing">登录</el-button>
      </div>
    </el-dialog>

    <!--  进度条  -->
    <!--<vue-progress-bar/>-->

  </el-container>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import menus from '@/menus'
import tabs from '@/tabs'
import AppApi from "@/AppApi";
import loginState from "@/state/loginState";
import tabState from "@/state/tabState";
import {LoginInfo, Menu} from "@/lib/types";

function sleep(time: number) {
  return new Promise(function (resolve) {
    setTimeout(resolve, time);
  });
}

export default defineComponent({
  name: "Home",
  components: {},
  props: {
    logo: {type: String},
    needLogin: {type: Boolean, default: true},
  },
  data() {
    return {
      // 系统菜单组
      menus: [] as Array<Menu>,

      // 主页正在加载标识
      loading: true,

      // 登录错误信息
      loginError: "",

      // 首页
      homepage: "",

      //  系统信息
      systemInfo: {},

      // 标签服务
      tabState,

      // 登录服务
      loginState
    }
  },
  setup() {
    return {tabs}
  },
  async mounted() {
    await this.init();
  },
  methods: {
    /**
     * 初始化
     **/
    async init() {
      try {
        this.loading = true;
        let filteredMenus = menus;

        // 初始化系统信息
        const systemInfo = await AppApi.getSystemInfo();
        Object.assign(this.systemInfo, systemInfo);


        if (this.needLogin) {
          // 获取登录信息
          const loginInfo = await AppApi.getLoginInfo();
          //初始化菜单
          if (loginInfo.menus.indexOf("*") == -1) {
            // 过滤菜单权限
            filteredMenus = menus.map((group) => {
              group.menus = group.menus.filter(menu => loginInfo.menus.indexOf(menu.name) > -1)
              return group;
            }).filter(menu => menu.menus.length > 0);
          }
          this.loginState.loginInfo = loginInfo;
        }

        // 激活首页
        this.tabState.homepage(systemInfo.homepage, "首页");

        // 假设等待
        await sleep(200);

        this.homepage = systemInfo.homepage;
        this.menus = filteredMenus as Array<Menu>;
      } finally {
        this.loading = false;
      }
    },
    /**
     * 点击菜单打开tab页
     * @package menu 菜单
     */
    clickMenu(menu: Menu) {
      // 激活当前已经打开的 tab
      for (let tab of this.tabState.tabOpened) {
        if (tab.name === menu.name) {
          this.tabState.tabActive = tab.name;
          return;
        }
      }

      // 否则打开一个新的
      this.tabState.addTab(menu.name, menu.title, menu.icon);
      this.tabState.active(menu.name);
    },
    //点击tab页的时候,同步激活当前选菜单
    clickTab(tab: any) {
      // this.tabState.tab_active = tab.paneName
    },
    // 关闭 tab 页的时候
    removeTab(tab: string) {
      this.tabState.close(tab)
    },
    // 处理登录
    async handleLogin() {
      try {
        this.loginState.isLoginProcessing = true;
        await AppApi.login(loginState.loginForm);
        this.loginState.isShowLoginDialog = false;
        await this.init();
      } finally {
        this.loginState.isLoginProcessing = false;
      }
    },
    // 处理登出
    async handleLogout() {
      if (window.confirm('您即将登出系统, 是否继续?')) {
        try {
          this.loading = true;
          await AppApi.logout();
          this.tabState.tabOpened = [];
          this.menus = [];
          this.loginState.loginInfo = {} as LoginInfo;
          this.loginState.isShowLoginDialog = true;
        } finally {
          this.loading = false;
        }
      }
    },
  }

})

</script>

<style>

@keyframes show-detail {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}


#app-container {
  height: 100%;
}

#app-header {
  color: #333;
  box-sizing: border-box;
  padding: 0;
  font-size: 12px;
  line-height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px hsla(0, 0%, 0%, 0.2);
  z-index: 999;

}

#app-aside {
  padding: 0;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

#app-main {
  padding: 3px;
  color: #333;
  box-sizing: border-box;
}


#app-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background: #c3cbd4;*/
  z-index: 1000;
  animation: show-detail 0.4s ease-in forwards;
}

.show-animation {
  animation: show-detail 0.4s ease-in forwards;
}

/***************** header标签 *****************/
.app-header__buttons {
  float: right;
  margin-right: 10px;
}

.app-header__userinfo {
  float: right;
  margin-right: 10px;
}

.app-header__logo {
  position: absolute;
  left: 30px;
  top: 10px;
}

.app-header__logo img {
  height: 40px;
}


/***************** tab标签 *****************/
#app-tabs {
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  position: relative;
}

#app-tabs .el-tabs__item {
  height: 32px;
  line-height: 32px;
  user-select: none;
}

#app-tabs .el-tabs__item:hover {
}


#app-tabs .el-tabs__nav .el-tabs__item.is-active {
  color: #1098d0;
  border-radius: 0;
}

#app-tabs .el-tabs__header {
  margin: 0;
  border-radius: 0;
}

#app-tabs .el-tabs__content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  padding: 32px 0 0 0;
  box-sizing: border-box;
}

#app-tabs .el-tab-pane {
  border: 1px solid #E4E7ED;
  border-top: 0;
  height: 100%;
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  animation: show-detail 0.1s ease forwards;
}


/***************** 菜单 *****************/
#app-menu {
  width: 100%;
  height: 100%;
  background-color: #071117;
  overflow-x: hidden;
}

#app-menu .el-submenu__title {
  height: 49px;
  line-height: 49px;
}

#app-menu .el-menu-item {
  height: 42px;
  line-height: 42px;
  user-select: none;
}

#app-menu .el-submenu__title,
#app-menu .el-menu-item {
  color: #ffffff;
}

#app-menu .el-submenu__title:hover,
#app-menu .el-menu-item:hover {
  background-color: #071117;
  color: #5fa0e5;
}

#app-menu .el-dropdown-menu,
#app-menu .el-menu {
  background-color: #071117;
  overflow: hidden;
}

#app-menu .is-active {
  background-color: #071117;
  color: #2d8cf0;

}

/***************** 底部信息 *****************/
#app-infos {
  position: absolute;
  bottom: 10px;
  text-align: center;
  color: white;
  font-size: 12px;
  width: 100%;
}

#app-infos p {
  padding: 0;
  margin: 0 0 5px 0;
}


</style>